<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8" />
    <title th:text="${News.title}"></title>
    <link href="/image/favicon.ico" rel="shortcut icon" />
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        /*<![CDATA[*/
        $(document).ready(function(){
            $(".review").click(function(){
                var tname = $(this).parent().parent().prev().prev().prev().text();
                $(".com_area").text('@'+tname+":");
            });
            var tagArray = $(".tag").text().split(',');
            var tag = "";
            tag += "<ul>";
            for(var i=0;i<tagArray.length;i++){
                tag += "<a href=\"/label?label="+tagArray[i]+"\"><li>" + tagArray[i] + "</li></a>";
            }
            tag += "</ul>";
            $(".tag").html(tag);
        });
        /*]]>*/
    </script>
    <style type="text/css">
        body{bgcolor:"#ebebeb";
            margin: 0;}
        .banner{
            height: 85px;
            background-color: white;
        }
        .title{
            font-size: 30px;
            font-family: "Microsoft YaHei";
            color: black;
            text-align: left;
            white-space: nowrap;
        }
        .author{
            font-size: 20px;
            color: black;
            text-align: left;
            white-space: nowrap;
        }
        .pubtime{
            font-size: 14px;
            color: gray;
            text-align: left;
            white-space: nowrap;
        }
        .context {
            width: 55%;
            text-align: left;
            margin: 0 auto;
        }
        .context img{
             transition: all 0.8s;
        }
        .context img:hover{
            transform: scale(1.06);
        }
        .share{width: 54%;
            margin: 0 auto;
            text-align: center;
            border-top: solid 1px #b3b3b3;
            border-bottom: solid 1px #b3b3b3;
        }
        .tag ul{
            list-style: none;
        }
        .tag ul li{
            display: inline;
            border: 0px solid;
            border-radius: 25px;
            margin: 10px;
            padding: 4px;
            background-color: #e3e3e3;
        }
        .com_row{margin-top: 10px;
            height: auto;
            width: 60%;
            text-align: left;
            margin-left: 20%;
            overflow: hidden;}
        .com_row:hover{background-color: #e3e3e3
        }
        .com_row a{text-decoration: none;}
        .com_row a:link{color: #333668;}
        .com_row a:visited{color: #333668;}
        .com_row a:hover{color: #333668;}
        .com_row a:active{color: #333668;}
        .uid{
            font-size: 18px;
            margin-right: 40px;
        }
        .comtime{
            font-size: 14px;
            color: #AAAAAA;
        }
        .comment{
            float: left;
        }
        .recomment{float: right;}
        .com_area{
            resize: none;
            width: 55%;
            height: 50px;
            overflow:hidden;
        }
        .com_btn{
            margin-right: 25%;
            text-align: right;
        }
        .button{
            height: 25px;
            border-radius: 5px;
            width: 40px;
            border: solid 0.5px;
            color: white;
            background-color: tomato;
        }
        .review{
            height: 25px;
            border-radius: 5px;
            width: 40px;
            border: solid 0.5px;
            color: white;
            background-color: tomato;
        }
    </style>
</head>
<body align="center">
    <div th:include="header"></div>
    <div th:if=${session.user!=null} th:include="foryou"></div>
    <div style="height: 50px">将内容下移</div>
    <!-- 标题距左边距离设置 -->
    <div style="float: left;color: black;margin-left: 20%;font-size: 70px">|</div>
    <div class="banner">
        <div class="title" th:text="${News.title}">不存在的新闻</div>
        <div class="author" th:text="'来自:'+${News.author}">佚名</div>
        <div class="pubtime" th:text="${#dates.format(News.publicationdate,'yyyy-MM-dd HH:mm:ss')}">1970-01-01 00:00:00</div>
    </div>
    <div class="tag" th:text="${News.type}">tag</div>
    <div class="context" th:utext="${News.context}">这条新闻不存在的</div>
    <div class="share">&nbsp;</div>
    <!--评论-->
    <div id="tocom" class="com_box">
        <form class="com_form" action="/comment/add" accept-charset="utf-8" method="post">
            <!--这条新闻id-->
            <input type="hidden" name="nid" th:value="${News.id}">
            <textarea class="com_area" name="context"></textarea>
            <div class="com_btn" th:if=${session.user!=null}>
                <input class="button" type="submit" value="评论">
            </div>
            <div class="com_btn" th:if=${session.user==null}>
                <a href="/user/login">登录评论</a>
            </div>
        </form>
    </div>
    <div class="com_row" th:each="cs:${Comments}">
        <!--假装是头像-->
        <div class="uphoto" style="float: left;font-size: 100px;margin-top: -50px">○</div>
        <div class="uid" th:utext="${cs.uid}">用户名</div>
        <div class="comtime" th:text="${#dates.format(cs.comtime,'yyyy-MM-dd HH:mm:ss')}">时间</div>
        <div class="comment" th:utext="${cs.tid}+${cs.context}">评论</div>
        <div class="recomment" th:if=${session.user!=null}>
            <a href="#tocom"><input class="review" type="button" value="回复"></a>
        </div>
    </div>
    <div th:include="footer"></div>
</body>
</html>